<template>
	<view class="container">
		<view v-if="rules.includes('1013')">
			<uni-section title="房源" type="line"></uni-section>
			<uni-row gutter="20">
				<uni-col :span="8" v-if="rules.includes('1022')">
					<navigator url="/pages/rooms/house" class="col" hover-class="hoverClass">
						<uni-icons custom-prefix="iconfont" type="icon-room1" size="24" color="#2979ff"></uni-icons>
						<text>整套</text>
					</navigator>
				</uni-col>
				<uni-col :span="8" v-if="rules.includes('1023')">
					<navigator url="/pages/rooms/home" class="col" hover-class="hoverClass">
						<uni-icons custom-prefix="iconfont" type="icon-room2" size="24" color="#2979ff"></uni-icons>
						<text>合租</text>
					</navigator>
				</uni-col>
				<uni-col :span="8" v-if="rules.includes('1024')">
					<navigator url="/pages/rooms/build" class="col" hover-class="hoverClass">
						<uni-icons custom-prefix="iconfont" type="icon-room3" size="24" color="#2979ff"></uni-icons>
						<text>整栋</text>
					</navigator>
				</uni-col>
			</uni-row>
		</view>
		<view v-if="rules.includes('1019')">
			<uni-section title="入住" type="line"></uni-section>
			<uni-row gutter="20">
				<uni-col :span="8" v-if="rules.includes('1020')">
					<navigator url="/pages/rent/rent" class="col" hover-class="hoverClass">
						<uni-icons custom-prefix="iconfont" type="icon-rent1" size="24" color="#2979ff"></uni-icons>
						<text>入住人</text>
					</navigator>
				</uni-col>
				<uni-col :span="8" v-if="rules.includes('1021')">
					<navigator url="/pages/rent/book" class="col" hover-class="hoverClass">
						<uni-icons custom-prefix="iconfont" type="icon-rent2" size="24" color="#2979ff"></uni-icons>
						<text>预定</text>
					</navigator>
				</uni-col>
			</uni-row>
		</view>
		<view v-if="rules.includes('1025')">
			<uni-section title="账单管理" type="line"></uni-section>
			<uni-row gutter="20">
				<uni-col :span="8" v-if="rules.includes('1026')">
					<navigator url="/pages/bill/finish" class="col" hover-class="hoverClass">
						<uni-icons custom-prefix="iconfont" type="icon-bill1" size="24" color="#2979ff"></uni-icons>
						<text>完成账单</text>
					</navigator>
				</uni-col>
				<uni-col :span="8" v-if="rules.includes('1027')">
					<navigator url="/pages/bill/collect" class="col" hover-class="hoverClass">
						<uni-icons custom-prefix="iconfont" type="icon-bill2" size="24" color="#2979ff"></uni-icons>
						<text>待收账单</text>
					</navigator>
				</uni-col>
				<uni-col :span="8" v-if="rules.includes('1028')">
					<navigator url="/pages/bill/payment" class="col" hover-class="hoverClass">
						<uni-icons custom-prefix="iconfont" type="icon-bill3" size="24" color="#2979ff"></uni-icons>
						<text>待付账单</text>
					</navigator>
				</uni-col>
			</uni-row>
		</view>
		<view v-if="rules.includes('1032')">
			<uni-section title="智能设备" type="line"></uni-section>
			<scroll-view scroll-x="true" class="enter">
				<navigator v-if="rules.includes('1033')" url="/pageA/lock/list" class="enterBox" hover-class="hoverClass">
					<uni-icons custom-prefix="iconfont" type="icon-lock" size="24" color="#2979ff"></uni-icons>
					<view class="name">智能锁</view>
				</navigator>
				<navigator url="/pageA/gateway/list" class="enterBox" hover-class="hoverClass">
					<uni-icons custom-prefix="iconfont" type="icon-gateway" size="24" color="#2979ff"></uni-icons>
					<view class="name">网关</view>
				</navigator>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
export default {
	data() {
		return {
			rules: []
		};
	},
	onLoad() {
		uni.showLoading({
			title: '加载中...'
		});
		api.getUserInfo({}).then((res) => {
			api.getRole({ role_id: res.data.profile.role_id }).then((data) => {
				this.rules = data.data.info.rules.split(',');
				uni.setStorageSync('rules', this.rules);
				uni.hideLoading();
			});
		});
	},
	methods: {}
};
</script>

<style lang="scss">
.container {
	padding: 20rpx;
	.uni-section {
		background: transparent;
	}
	.uni-row {
		.col {
			display: flex;
			justify-content: center;
			align-items: center;
			background: #fff;
			padding: 30rpx 10rpx;
			border-radius: 10rpx;
			font-size: 26rpx;
			text{
				margin-left: 10rpx;
			}
		}
	}
	.enter {
		white-space: nowrap;
		width: 100%;

		.enterBox {
			box-sizing: border-box;
			display: inline-block;
			width: 145rpx;
			text-align: center;
			background: #fff;
			margin-right: 20rpx;
			padding: 20rpx 10rpx;
			border-radius: 10rpx;
			font-size: 26rpx;
			.name{
				margin-top: 10rpx;
			}
			&:last-child {
				margin-right: 0;
			}
		}
	}
}
</style>
